<template>
	<article>
		<div class="nav"  v-title="'上传拾宠'">
			<div class="drop" @click="switchSize">
				<span>{{size}}</span>
				<i class="icon icon-xiala"></i>
				<ul :style="{height: dropSize + 'rem'}">
					<li v-for="v in sizeList" @click="type(v.id)">{{v.name}}</li>
				</ul>
			</div>
			<div class="option" :class="{active: active == i}" v-for="(v, i) in navList" @click="tabs(i, v.name)">
				<img :src="v.img">
				<span>{{v.type}}</span>
			</div>
		</div>

		<section class="pet-intro">
			<div class="left">
				<h5>宠物信息</h5>
				<div class="trait">
					<div class="left">
						<div class="list">
							品种：<input v-model="breed" maxlength="16" placeholder="例：泰迪"></input>
						</div>
						<div class="list">
							特征：<input v-model="trait" maxlength="20" placeholder="例：条纹衣服"></input>
						</div>
					</div>
				</div>
			</div>
			<div class="right">
				<div v-if="imgBol">
					<input type="file" class="file" id="filetp" @change="getImg">
					<p class="icon icon-shangchuan"><span>必须上传图片</span></p>
				</div>
				<img v-else :src="imgUrl">
			</div>
			<div class="title-intro">
				<div class="list">
					<span>标 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;题：</span>
					<input v-model="title"  maxlength="16" placeholder="请填写标题"></input>
				</div>
				<div class="list" @click="getTime">
					<p></p>
					<span>发现时间：</span>
					<input v-model="time" placeholder="请选择发现时间         必填"></input>
				</div>

				<div class="list">
					<span>发现区域：</span>
					<!-- <input v-model="place"  maxlength="20" placeholder="请填写丢失位置         必填"></input> -->
					<input type="input" placeholder="请选择城市             	 必填" v-model="place" @focus="open">
				</div>
				<div class="list">
					<span>详细位置：</span>
					<input v-model="xxdz"  maxlength="20" placeholder="请填写详细地址"></input>
				</div>

				<div class="list">
					<span>描 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;述：</span>
					<textarea v-model="intro" maxlength="100" placeholder="请对宠物进行描述"></textarea>
				</div>
				<!-- <div class="list" >
					<span class="sp1">上传视频：</span>
					<div class="right2">
						<div v-if="spBol">
							<input type="file" class="file" id="filesp" @change="getsp">
							<p class="icon icon-shangchuan"><span>上传视频</span></p>
						</div>
						<img v-else :src="spUrl">
					</div>
				</div> -->
			</div>
			<br>
			<br>

		</section>

		<section class="person-intro">
			<h5>个人信息</h5>
			<div class="trait">
				<div class="list"> 姓名：<input v-model="name"  maxlength="16"  placeholder="请填写你的姓名           必填"></input></div>
				<div class="list"> 手机：<input v-model="phone"  maxlength="16"  placeholder="请填写你的手机号         必填"></input></div>
				<div class="list" v-if="false"> 微信：<input v-model="weixin"  maxlength="16"  placeholder="请填写你的微信号"></input></div>
				<div class="list" v-if="false"> 邮箱：<input type="email" v-model="email"  maxlength="30"  placeholder="请填写你的邮箱"></input></div>
				<div class="list"> 悬赏：<input type="number" v-model="reward"  maxlength="16"  placeholder="请填写你的悬赏金额"></input></div>
			</div>
		</section>

		<button class="upload" @click="submit">上传推送</button>

		<div class="msg" v-if="msgBol">
			<div class="msg-box">
				<img src="../../assets/img/yes.png">
				<p>您已上传成功</p>
					<mt-button size="small" type="primary" @click="$router.push('/petShop')">收容所</mt-button>
					<router-link to="/pick">
				<mt-button size="small" type="primary" >先离开</mt-button>
				</router-link>
			</div>
		</div>

		<mt-datetime-picker
    		v-model="pickerTime"
    		@confirm="confirm"
    		ref="picker"
				class="city"
    		type="date">
  		</mt-datetime-picker>
			<div class="mask" v-show="mask" @click="close">
			</div>
			<mt-picker :slots="slots" @change="onValuesChange" class="city" :style="{transform: 'translateY('+translateY+')'}">
			</mt-picker>
	</article>
</template>

<script type="text/javascript">
import '../../assets/lrz/lrz.bundle.js'
	import Loading from '../loading/loading'
	import { MessageBox, Indicator } from 'mint-ui';
	export default {
		components: { Loading },
		data () {
			return {
				msgBol: false,
				imgBol: true,
				spBol: true,
				imgUrl: '',
				spUrl:'',
				color: '',
				imgSrc: '',
				breed: '',
				trait: '',
				place: '',
				xxdz:'',
				time: '',
				name: '',
				phone: '',
				email: '',
				weixin: '',
				reward: '',
				classify: 'g',

				title: '',
				intro: '',

				pickerTime: '',
				size: '大型',
				sizeBol: true,
				dropSize: 0,
				active: 1,
				translateY: '100%',
				mask: false,
				slots: [
			        {
			          	flex: 1,
			          	values: ["北京市", "广东省", "山东省", "江苏省", "河南省", "上海市", "河北省", "浙江省", "香港特别行政区", "陕西省", "湖南省", "重庆市", "福建省", "天津市", "云南省", "四川省", "广西壮族自治区", "安徽省", "海南省", "江西省", "湖北省", "山西省", "辽宁省", "台湾省", "黑龙江", "内蒙古自治区", "澳门特别行政区", "贵州省", "甘肃省", "青海省", "新疆维吾尔自治区", "西藏区", "吉林省", "宁夏回族自治区"],
			          	className: 'slot1',
			          	defaultIndex: 0,
			          	textAlign: 'right'
			        },
			        {
			          	divider: true,
			          	content: '-',
			          	className: 'slot2'
			        },
			        {
			          	flex: 1,
			          	values: [],
			          	defaultIndex: 0,
			          	className: 'slot3',
			          	textAlign: 'left'
			        }
			      ],
				sizeList:[
					{name: '大型', id:3},
					{name: '中型', id:2},
					{name: '小型', id:1}
				],
				navList: [
					{name: 'm',type:'猫', img: require('../../assets/img/mao_78.png')},
					{name: 'g',type:'狗', img: require('../../assets/img/gougou_60.png')},
					{name: 'qt',type:'其他', img: require('../../assets/img/qit.png')},
				]
			}
		},
		created () {
			// console.log(this.changeTime(new Date().getTime()))
			// this.time = this.changeTime(new Date().getTime())
			// MessageBox('提示', '操作成功');
			this.getname()
			console.log(this.ls.getItem('userID'))
		},
		methods: {
			open () {
			 	document.activeElement.blur();//屏蔽默认键盘弹出；
				this.mask = true;
				this.translateY = 0;
			},
			close() {
				this.mask = false;
				this.translateY = '100%';
			},
			onValuesChange(picker, values) {
				picker.slots[2].values = this.$store.state.menu[values[0]];
				// console.log(picker.slots[2].values)
				if (!values[0] || !values[1]) return

				this.place = values[0] + '-' + values[1];
				// console.log(this.place)
		    },
				getname () {
					this.http.get(this.$store.state.hostname + 'yh/getyhinfo.do',{
					    date: new Date()
					}).then( res => {
						this.ls.setItem('userID', res.data.data.id);
						this.$store.state.person = res.data.data;
					})
					this.axios.post(this.$store.state.hostname + 'cw/getyhinfo.do',{
						yhid: this.ls.getItem('userID'),
					// yhid: 48,
					}).then( res => {
						this.name = res.nc;
						this.phone = res.sjh;
					})
				},
			tabs (i, name) {
				this.classify = name;
				this.active = i;
			},
			submit () {

				if (!this.imgUrl) {
		            MessageBox("请选择图片");
		            return false;
				}else if(!this.time) {
								MessageBox("请选择丢失时间");
								return false;
				}else if(!this.place) {
		            MessageBox("请输入宠物丢失的区域");
		            return false;
				}else if(!this.name) {
		            MessageBox("请填写姓名");
		            return false;
				}else if(!this.phone) {
		            MessageBox("请填写手机号码");
		            return false;
				}

				console.log("userid:" + this.ls.getItem('userID'))
				if (!this.ls.getItem("userID")) {
				    this.http.get(this.$store.state.hostname + 'yh/getyhinfo.do',{
				        date: new Date()
				    }).then( res => {
				        		console.log(this.$route.name)
				            console.log(res)

				            this.$store.state.person = res.data.data;
				            if (!res) return;
				            // if (!res.data.data.id) MessageBox.alert('信息获取失败');

				            Indicator.close();
				            this.ls.setItem('userID', res.data.data.id);
				            this.getData()
	            			// this.axios.post(this.$store.state.hostname + 'cw/saveCwinfo.do',{
	            			// 	yhid: this.ls.getItem('userID'),
	               //              lx: 'D',
	               //              color: this.color,
	               //              zl: this.classify,
	               //              type: this.size,
	               //              pz: this.breed,
	               //              tz: this.trait,
	               //              tp: this.imgUrl,
	               //              title: this.title,
	               //              ms: this.intro,
	               //              addr: this.place,
	               //              sj: this.time,
	               //              xsje: this.reward,
	               //              wxzh: this.weixin,
	               //              mc: this.name,
	               //              dh: this.phone,
	               //              yx: this.email
	            			// }).then( res => {
	            			// 	console.log(res)
	            			// 	if (res == 'L') {
	            			// 		this.$store.state.wrap = true;
	            			// 		this.$store.state.info = true;
	            			// 		this.$store.state.photo = false;
	            			// 	}else if (res == 'N'){

	            			// 	}else{
	            			// 		this.msgBol = true;
	            			// 	}


	            			// })

				        }).catch( res => {
				            Indicator.close();
				        })
				}else{
					this.getData()
				}
			},

			getData () {
				this.axios.post(this.$store.state.hostname + 'cw/saveCwinfo.do',{
					yhid: this.ls.getItem('userID'),
					// yhid: 48,
	                lx: 'J',
	                color: this.color,
	                zl: this.classify,
	                type: this.size,
	                pz: this.breed,
	                tz: this.trait,
	                tp: this.imgUrl,
	                sp: this.spUrl,
	                title: this.title,
	                ms: this.intro,
	                addr: this.place,
									xxdz:this.xxdz,
	                sj: this.time,
	                xsje: this.reward,
	                wxzh: this.weixin,
	                mc: this.name,
	                dh: this.phone,
	                yx: this.email
				}).then( res => {
					console.log(res)
					// console.log(JSON.stringify({
					// 	yhid: this.ls.getItem('userID'),
		   //              lx: 'D',
		   //              color: this.color,
		   //              zl: this.classify,
		   //              type: this.size,
		   //              pz: this.breed,
		   //              tz: this.trait,
		   //              title: this.title,
		   //              ms: this.intro,
		   //              addr: this.place,
		   //              sj: this.time,
		   //              xsje: this.reward,
		   //              wxzh: this.weixin,
		   //              mc: this.name,
		   //              dh: this.phone,
		   //              yx: this.email
					// }))
					if (res == 'L') {
						// this.$store.state.wrap = true;
						// this.$store.state.info = true;
						// this.$store.state.photo = false;
					}else if (res == 'N'){

					}else{
						this.msgBol = true;
					}


				})
			},
			switchSize () {
				if (this.sizeBol) {
					this.sizeBol = false;
					this.dropSize = 0.75
				}else{
					this.sizeBol = true;
					this.dropSize = 0
				}
			},
			getImg () {
				var self = this;
				var oFile = document.querySelector('#filetp');
				this.imgSrc = oFile.files[0];
     			console.log(this.imgSrc)

				if(!/image\/\w+/.test(this.imgSrc.type)){
		            MessageBox("请确保文件为图像类型");
		            return false;
		        }

		        if ((this.imgSrc.size/1024/1024).toFixed(0) >= 4) {
		            MessageBox("图片尺寸过大");
		            return false;
		        }

				this.imgBol = false;
				// lrz(this.imgSrc).then(function (rst) {
				// 		// 处理成功会执行
				// 		console.log(rst);
				// 		// console.log(rst.base64);
				// 		self.imgUrl1 = rst.base64;
				// })
				var base64 = "";
        		var reader = new FileReader();
        		reader.readAsDataURL(this.imgSrc)
        		reader.onload = function(e){
        			base64 = this.result;
					self.imgUrl = base64;
		        }

			},
			// getsp () {
			// 	var self = this;
			// 	var oFile = document.querySelector('#filesp');
			// 	this.imgSrc = oFile.files[0];
     	// 		console.log(this.imgSrc)
      //
      //
      //
			// 	this.spBol = false;
      //
			// 	var base64 = "";
      //   		var reader = new FileReader();
      //   		reader.readAsDataURL(this.imgSrc)
      //   		reader.onload = function(e){
      //   			base64 = this.result;
			// 				self.spUrl = base64;
		  //       }
      //
			// },
			type (id) {
				// console.log(id)
				if (id === 1) {
					this.size = '小型'
				}else if ( id === 2) {
					this.size = '中型'
				}else{
					this.size = '大型'
				}
			},
			getTime () {
				this.$refs.picker.open();
			},
			confirm () {
				// console.log(new Date(this.time).getTime())
				this.time = this.changeTime(new Date(this.pickerTime).getTime())
			}
		}
	}
</script>

<style lang="less" scoped>
	article {
		background: #F5F5F5;
		input {
			outline:none;
			border:none;
			-webkit-appearance: none
		}
		.nav {
			height: 0.5rem;
			display:flex;
		  	align-items:center;
		  	justify-content: center;
		  	z-index: 2;

			.drop {
		  		background: #fff;
		  		padding:0.05rem 0.1rem;
		  		margin:0 0.1rem;
		  		border-radius:0.1rem;
	  			color: #555;
	  			position: relative;

	  			i {
	  				font-size: 0.14rem;
	  			}

				ul {
					position: relative;
					height:0;
					transform: all 1s;
					overflow: hidden;
					z-index: 2;
					&:after {
						position: absolute;
						bottom: 100%;left:50%;
						transform: translateX(-50%);
						content: '';
						width: 0;
						height: 0;
					 	border-left: 0.03rem solid transparent;
						border-right: 0.03rem solid transparent;
						border-bottom: 0.06rem solid #fff;
					}
					position: absolute;
					top:e("calc(100% + 0.05rem)");left:0;
					width: 100%;
					background: #fff;

					li {
						line-height: 0.25rem;
						font-size: 0.14rem;
						text-align: center;
						position: relative;
						background: #fff;
						&:after  {
							content: '';
							position: absolute;
							width: 200%;
							height: 200%;
							top:0;left:0;
							border:1px solid #ccc;
							transform-origin: 0 0;    //设置元素的基点为0 0
							transform: scale(0.5);
							box-sizing: border-box;
						}
					}
				}

			}

		  	.option {
		  		background: #fff;
		  		padding:0.05rem 0.1rem;
		  		margin:0 0.1rem;
		  		border-radius:0.1rem;
	  			color: #ccc;
		  		img {
		  			width: 0.2rem;
		  			vertical-align: middle;
		  		}
		  		span {
		  			margin-left:0.05rem;
		  			vertical-align: middle;
		  		}
		  	}

		  	.active {
				background: #77BBCF;
				color: #fff;
			}
		}

		.pet-intro {
			background: #fff;
			padding: 0.2rem 0.1rem 0rem 0.2rem;
		    box-shadow:0px 0.01rem 0.05rem #969696;
		    font-size:0.14rem;


			.title-intro {
				padding-bottom:0.05rem;
				.list {
		    		margin:0.08rem 0;
						.sp1{
							margin-top: 40px;
						}

					p {
		    			width: 100%;
		    			z-index: 2;
		    			height: 0.25rem;
		    			line-height: 0.25rem;
		    			background: transparent;
		    			position: absolute;
		    			right:0;
		    		}
		    		>* {
		    			vertical-align: middle;
		    		}
		    		input, textarea {
		    			display: inline-block;
		    			width: 2.5rem;
		    			// height: 0.35rem;
		    			line-height: 0.25rem;
		    			background: #F2F2F2;
		    			text-indent: 1em;
		    			position: relative;
		    			border: 1px solid #ccc;
		    			border-radius:0.05rem;
		    		}
		    		textarea {
		    			// height: 0.4rem;
		    			outline: none;
		    			text-indent: 0.5em;
		    			padding: 0.05rem 0.1rem;
		    		}

		    		span {
		    			display: inline-block;
		    			width: 0.8rem;
		    		}
		    	}
			}


			.left {
	    		display: inline-block;
	    		vertical-align: middle;
	    		width: 1.8rem;
			    .trait {
			    	padding:0.03rem 0 0.1rem 0;
			    	line-height: 0.18rem;
			    	position: relative;
			    	font-size: 0.12rem;

			    	&:after {
						content: '';
						position: absolute;
						width: 100%;
						top:100%;left:0;
						border-bottom:1px solid #ccc;
						transform: scale(1,0.5);
					}

			    	.list {
			    		margin:0.08rem 0;
			    		input {
			    			display: inline-block;
			    			width: 1.3rem;
			    			height: 0.25rem;
			    			line-height: 0.25rem;
			    			background: #F2F2F2;
			    			text-indent: 1em;
			    			position: relative;
			    			border: 1px solid #ccc;
			    			border-radius:0.05rem;
			    		}
			    	}
			    }
			}
		    .right {
				display: inline-block;
				vertical-align: middle;
				width: 1.6rem;
				text-align: center;
				img {
					width: 0.8rem;
				}

				div {
					position: relative;
					.file {
						opacity: 0;
						position: absolute;
						left:50%;
						transform: translateX(-50%);
						width: 1rem;
						height: 0.3rem;
					}
					.icon {
						width: 1.3rem;
						height: 0.3rem;
						font-size: 0.12rem;
						line-height: 0.3rem;
						border: 1px solid #eee;
						border-radius:0.05rem;
						text-align: center;
						margin: 0 auto;

						span {
							margin-left:0.1rem;
							color:0.12rem;
							color:#777;
						}
					}
				}
	    	}
				.right2 {
					// margin-top: -10px;
				display: inline-block;
				vertical-align: middle;
				width: 1.6rem;
				text-align: center;
				img {
					width: 0.8rem;
				}

				div {
					position: relative;
					.file {
						opacity: 0;
						// margin-top: 10px;
						position: absolute;
						z-index: 10;
						left:50%;
						transform: translateX(-50%);
						width: 1.2rem;
						height: 0.3rem;
					}
					.icon {
						width: 1.3rem;
						height: 0.3rem;
						font-size: 0.12rem;
						line-height: 0.3rem;
						border: 1px solid #eee;
						border-radius:0.05rem;
						text-align: center;
						margin: 0 auto;

						span {
							margin-left:0.1rem;
							color:0.12rem;
							color:#777;
						}
					}
				}
	    	}
		    .lose {
		    	font-size:0.12rem;
		    	margin:0.1rem 0 0.05rem 0;

		    	.list {
		    		margin:0.08rem 0;
		    		position: relative;
		    		input {
		    			display: inline-block;
		    			width: 1rem;
		    			height: 0.25rem;
		    			line-height: 0.25rem;
		    			background: #F2F2F2;
		    			text-indent: 1em;
		    			position: relative;
		    			border: 1px solid #ccc;
		    			border-radius:0.05rem;
		    		}

		    		p {
		    			width: 100%;
		    			z-index: 2;
		    			height: 0.25rem;
		    			line-height: 0.25rem;
		    			background: transparent;
		    			position: absolute;
		    			right:0;
		    		}
		    	}
		    }
		}

		.person-intro {
			background: #fff;
			margin-top:0.15rem;
			padding: 0.2rem 0.1rem 0rem 0.2rem;
		    box-shadow:0px 0.01rem 0.05rem #969696;
		    font-size:0.14rem;

		    .trait {
		    	padding:0.03rem 0 0.2rem 0;
		    	line-height: 0.18rem;
		    	position: relative;
		    	font-size: 0.12rem;

		    	&:after {
					content: '';
					position: absolute;
					width: 100%;
					top:100%;left:0;
					border-bottom:1px solid #ccc;
					transform: scale(1,0.5);
				}
		    	.list {
		    		margin:0.15rem 0;
		    		input {
		    			display: inline-block;
		    			width: 2.5rem;
		    			height: 0.3rem;
		    			line-height: 0.25rem;
		    			background: #F2F2F2;
		    			text-indent: 1em;
		    			position: relative;
		    			border: 1px solid #ccc;
		    			border-radius:0.05rem;
		    		}
		    	}
		    }
		}

		.upload {
			display: block;
			width: 76%;
			margin:0.3rem auto;
			margin-bottom:0.1rem;
			font-size: 0.3rem;
			line-height: 0.5rem;
			background: #77BBCF;
			color:#fff;
			border:1px solid #eee;
			border-radius: 0.05rem;
		}

		.msg {
			position: fixed;
			width: 100%;
			height: 100%;
			z-index: 99;
			top:0;left:0;
			background: rgba(0,0,0, .5);

			.msg-box {
				width: 2.5rem;
				background: #fff;
				border-radius: 0.1rem;
				padding:0.1rem;
				position: absolute;
				top:50%;left: 50%;
				transform: translate(-50%, -50%);
				text-align: center;

				img {
					width: 0.3rem;
				}

				p {
					line-height: 0.6rem;
				}

				button {
					margin:0 0.2rem;
				}
			}
		}
		.mask {
			position: fixed;
			top:0;left:0;
			width: 100%;height: 100%;
			background: rgba(0,0,0,.5);
		}
		.city {
			position: fixed;
			width: 100%;
			// background: #fff;
			 background: linear-gradient(#f4f8f6,#808080 ,#f4f8f6);
			bottom:0;
			z-index: 100;
			// transform: translateY(100%);
			transition: all .3s;


		}

	}
</style>
